<template>
  <div class="input">
    <!-- {{this.element}} -->
    <van-field v-model="element.vModel" :required="element.required" :label="element.label" :placeholder="element.placeholder" :type="element.textType" :disabled="element.disabled" :readonly="element.readonly" :rules="rules" />
  </div>
</template>

<script>
export default {
  name: 'inputField',
  inject: ['element'],
  data() {
    return {}
  },
  computed: {
    // 函数校验
    validatorList() {
      const { fnList } = this.element
      return fnList?.map(item => {
        return {
          validator: item
        }
      })
    },
    // 正则校验
    pattern() {
      // 校验是否以/开头，并以/结尾
      const reg = /^\/.*\/$/
      const { regList } = this.element
      // console.log(regList, '===regList===')
      return regList?.map(item => {
        return {
          pattern: reg.test(item.reg) ? eval(item.reg) : '',
          message: item.msg
        }
      })
    },
    rules() {
      const { required, label } = this.element
      return [
        { required, message: `请填写${label}` }, 
        ...this.validatorList,
        ...this.pattern
      ]
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.van-cell:last-child::after {
  display: block;
}
</style>